<template>
  <div class="pages-container">

    <!-- 搜索框 Or 工具框 -->
    <a-form class="pages-tools-box" :form="form" @submit="getSearch">
      <a-row :gutter="[15, 10]">
        <a-col :span="4">
          <a-form-item>
            <a-input allowClear placeholder="手机号" v-decorator="['mobile']"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-input allowClear placeholder="姓名" v-decorator="['name']"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-input allowClear placeholder="公司名称" v-decorator="['company']"/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-select allowClear placeholder="选择状态" v-decorator="['state']">
              <a-select-option :value="v.id" v-for="(v, i) in Config.User" :key="i">{{ v.title }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-select allowClear placeholder="选择身份" v-decorator="['type']">
              <a-select-option :value="v.id" v-for="(v, i) in Config.Type" :key="i">{{ v.title }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清空</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="add">新增</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="test">测试按钮</a-button>
        </a-col>
      </a-row>
    </a-form>

    <!-- 表格 -->
    <div class="pages-content">
      <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id" :loading="tableLoading">
        <a-space slot="company" slot-scope="record">
          <span v-if="record.type == 1">{{ record.supplier && record.supplier.title | Null }}</span>
          <span v-if="record.type == 2">{{ record.company && record.company.title | Null }}</span>
        </a-space>
        <a-space slot="type" slot-scope="record">{{ record.type | TypeToLabel }}</a-space>
        <a-space :class="'color-'+record.state" slot="state" slot-scope="record">{{
            record.state | UserToLabel
          }}
        </a-space>
        <a-space slot="mobileState" slot-scope="record">
          {{ record.mobileState | MobileStateToLabel }}
        </a-space>
        <a-space slot="usState" slot-scope="record">
          <span v-if="record.type == 1">
            {{ record.usState | usStateToLabel }}
          </span>
        </a-space>
        <a-space slot="enable" slot-scope="record">
          {{ record.enable | EnableToLabel }}
        </a-space>
        <a-space slot="serviceState" slot-scope="record">
          {{ record.serviceState == 1 ? '是' : '否' }}
        </a-space>
        <a-space slot="workingImage" slot-scope="row">
          <img :src="row.workingImage" style="max-width: 40px; max-height: 40px" @click="lookPhoto(row.workingImage)">
        </a-space>
        <a-space slot="action" slot-scope="text,record,index">
          <a class="color-2" v-if="record.state == 1" @click="closure(record, index, true)">审核通过</a>
          <a class="color-4" v-if="record.state == 1" @click="closure(record, index, false)">审核不通过</a>
          <a v-ButtonPermission="{ButtonName: 'UserStop'}" class="color-4" v-if="record.enable == 1" @click="ban(record, index)">封禁</a>
          <a class="color-4" v-if="record.enable == 0" @click="liftingBan(record, index)">解封</a>
          <a class="color-3" v-if="record.state == 2" @click="clearOpenId(record, index)">清除绑定</a>
          <a class="color-3" v-if="record.state == 2" @click="changeMobile(record, index)">更换手机号</a>
          <!--          <a class="color-2" v-if="record.state == 2 && record.type == 1"-->
          <!--             @click="setCustom(record, index)">{{ record.serviceState == 1 ? "取消客服" : "设置客服" }}</a>-->
        </a-space>
      </a-table>
    </div>

    <!-- 分页 -->
    <a-pagination class="pagination" show-quick-jumper :default-current="current_page" :total="total"
                  @change="changePages"/>
  </div>
</template>

<script>
const columns = [
  {title: 'ID', dataIndex: 'id'},
  {title: '协聘号', dataIndex: 'userNum'},
  {title: '姓名', dataIndex: 'name'},
  {title: '手机号', dataIndex: 'mobile'},
  {title: '企业邮箱', dataIndex: 'email'},
  {title: '公司名称', scopedSlots: {customRender: 'company'}},
  {title: '职位', dataIndex: 'position'},
  {title: '身份', scopedSlots: {customRender: 'type'}},
  {title: '联系方式', scopedSlots: {customRender: 'mobileState'}},
  {title: '允许同行电话联系', scopedSlots: {customRender: 'usState'}},
  {title: '工作证明', scopedSlots: {customRender: 'workingImage'}},
  {title: '账户状态', scopedSlots: {customRender: 'state'}},
  {title: '封禁状态', scopedSlots: {customRender: 'enable'}},
  // {title: '是否为客服', scopedSlots: {customRender: 'serviceState'}},
  {title: '操作', scopedSlots: {customRender: 'action'}},
];

import config from "../../tools/config";

export default {
  name: "List.vue",
  data() {
    return {
      // 公用配置
      Config: {},
      // 分页数据
      current_page: 1,
      total: 100,
      // table数据
      tableLoading: false,
      columns,
      data: [],
      // 搜索表单
      form: this.$form.createForm(this),
      // other
      UserStateList: [],
      //
      newMobile: '',
    };
  },
  created() {
    this.Config = config
    this.getData()
    console.log(this.$route.query.params);
  },
  methods: {
    lookPhoto(src) {
      this.Util.lookPhoto(src)
    },
    /**
     * 进行搜索
     * @param e
     */
    getSearch(e) {
      e.preventDefault();
      this.form.validateFields((error) => {
        if (!error) {
          this.getData(1)
        }
      });
    },

    /**
     * 请求Table数据
     * @param pages
     */
    getData(pages = 1) {
      this.tableLoading = true
      this.Http.get('/admin/user/index', {
        page: pages,
        ...this.form.getFieldsValue()
      }).then(res => {
        this.tableLoading = false
        if (res.code === 1) {
          this.data = res.data.data
          this.current_page = res.data.current_page
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },

    /**
     * 切换分页时
     * @param event
     */
    changePages(event) {
      this.getData(event)
    },

    /**
     * 清空搜索项
     */
    handleReset() {
      this.form.resetFields();
      this.getData()
    },

    /**
     * 封禁
     * @param record
     * @param index
     */
    ban(record) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认进行封禁',
        onOk() {
          _this.userBD(record.id, 0)
        },
        onCancel() {
        },
      })
    },


    /**
     * 解禁
     * @param record
     * @param index
     */
    liftingBan(record) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认进行解封',
        onOk() {
          _this.userBD(record.id, 1)
        },
        onCancel() {
        },
      })
    },

    add() {
      this.$router.push("/Home/User/Detail")
    },

    /**
     *  清理OpenId
     */
    clearOpenId(row, index) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认清理账号与微信号的绑定关系',
        onOk() {
          _this.Http.get("/admin/user/clearWx", {
            id: row.id,
          }).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },

    /**
     *  更换手机号
     */
    changeMobile(row, index) {
      const h = this.$createElement
      const _this = this
      this.$confirm({
        title: '提示',
        content: () => h('a-input', {
          attrs: {
            id: 'newMobile',
            placeholder: "请输入更换的手机号"
          },
          on: {
            input(v) {
              _this.newMobile = document.getElementById("newMobile").value
            }
          }
        }),
        onOk() {
          _this.Http.get("/admin/user/upMobile", {
            id: row.id,
            mobile: _this.newMobile
          }).then(res => {
            if (res.code == 1) {
              _this.newMobile = ''
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },

    userBD(id, enable) {
      this.Http.get("/admin/user/enable", {
        id: id,
        enable: enable
      }).then(res => {
        if (res.code == 1) {
          this.getData(this.current_page)
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    /**
     * 审核
     * @param row
     * @param index
     * @param type
     */
    closure(row, index, type) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '是否确认您的操作',
        onOk() {
          _this.Http.get("/admin/user/state", {
            id: row.id,
            state: type ? 2 : 3
          }).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },


    /**
     * 设置为客服
     * @param row
     * @param index
     */
    setCustom(row, index) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: `是否确认${row.serviceState == 1 ? '取消' : '设置'}客服`,
        onOk() {
          _this.Http.get("/admin/user/setService", {
            id: row.id,
            serviceState: row.serviceState == 1 ? 0 : 1
          }).then(res => {
            if (res.code == 1) {
              _this.getData(_this.current_page)
              _this.$message.success(res.msg)
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {
        },
      })
    },

    test(){
      this.$router.push(`/Home/User/List?params=${Math.random()}`)
    }
  },
}
</script>

<style scoped>

</style>
